<template>
    <p class="header">所有订单</p>
    <label class="orderQuery">订单查询:<input v-model="orderNumber" placeholder="请输入订单编号" /></label>
    <span class="btn">
        <el-button type="primary" @click="handleClick()">查询</el-button>
        <el-button type="primary" plain @click="restbtn()">重置</el-button>

    </span>
    <!-- 新增订单 -->
    <div class="">

        <el-button type="primary" plain @click="dialogFormVisible = true">新增订单</el-button>
        <el-dialog v-model="dialogFormVisible" title="新增订单" width="500px">
            <el-form :model="form">
                <el-form-item label="剧本id" :label-width="formLabelWidth">
                    <el-input v-model="form.scriptId" autocomplete="off" />
                </el-form-item>
                <el-form-item label="游戏开始时间" :label-width="formLabelWidth">
                    <el-input v-model="form.gameStartDateTime" autocomplete="off" />
                </el-form-item>
                <el-form-item label="游戏结束时间" :label-width="formLabelWidth">
                    <el-input v-model="form.gameEndDateTime" autocomplete="off" />
                </el-form-item>
                <el-form-item label="游戏参加人数" :label-width="formLabelWidth">
                    <el-input v-model="form.peopleCount" autocomplete="off" />
                </el-form-item>
                <el-form-item label="主持人" :label-width="formLabelWidth">
                    <el-input v-model="form.host" autocomplete="off" />
                </el-form-item>
                <el-form-item label="管理员" :label-width="formLabelWidth">
                    <el-input v-model="form.handler" autocomplete="off" />
                </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" width="60px">取消</el-button>
                    <el-button type="primary" @click="setUp">创建</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <!-- 订单表格 -->
    <el-table :data="table.tableData" style="width: 100%" border="true">
        <el-table-column prop="id" label="剧本id"></el-table-column>
        <el-table-column prop="scriptName" label="剧本名称"></el-table-column>
 
        <el-table-column prop="orderNumber" label="订单编号"></el-table-column>
        <el-table-column prop="peoplecount" label="组局人数"></el-table-column>
        <el-table-column label="订单状态">
            <template #default="scope">
                <span>{{ scope.row.orderStatus == 1 ? '正在拼单' : (scope.row.orderStatus == -1 ? '过期' :
                        (scope.row.orderStatus == 2 ? '满员' : '游戏中'))
                }}</span>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup>
import api from '../../utils/api'
import { ref, reactive, onBeforeMount } from 'vue';
//表格
let table = reactive({ tableData: [] });
//查询
let orderNumber = ref();
//新增订单
let dialogFormVisible = ref(false)
let formLabelWidth = '140px'
const form = reactive({
    scriptId:'',
    gameStartDateTime:'',
    gameEndDateTime:'',
    peopleCount:'',
    host:'',
    handler:''
})

//页面请求
onBeforeMount(() => {
    pageShow()
})
let pageShow = () => {
    api.allOrder()
        .then(function (res) {
            table.tableData = res.data.data
        })
}
//查询
let handleClick = () => {
    api.query(orderNumber.value).then((res) => {
        table.tableData = res.data.data
    })

}
// 重置
let restbtn = () => {
    pageShow()
    orderNumber.value = ''

}
// 新增订单
let setUp = () => {
    console.log(form);
    if (form.gameStartDateTime.length>0 &&form.scriptId.length>0&&form.peopleCount.length>0&& form.gameEndDateTime.length>0&&form.host.length>0&&form.handler.length>0) {
        
        api.setUp(form).then((res) => {
            console.log(res.data.code);
            if(res.data.code==200){
                dialogFormVisible.value= false
              
            }
        })
    }else{
       alert('不能为空')
    }
}
</script>
<style scoped>
* {
    padding: 0;
    margin: 0;
}

.header {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}

.orderQuery input {
    margin-right: 4px;
    width: 230px;
    border-radius: 5px;
    height: 27px;
    margin-bottom: 15px;
}

.btn .el-button {
    width: 70px;
    border-radius: 5px;
}

.el-button--text {
    margin-right: 15px;
}


.el-input {
    width: 250px;
    margin-bottom: 10px;
}

.dialog-footer button:first-child {
    width: 60px;
    margin-right: 10px;
}

.dialog-footer button:last-child {
    width: 60px;
    margin-right: 10px;
}
</style>